import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';
import { useContext, useEffect, useMemo } from 'react';
import { ChangeControllerContext } from '../common/useOAReturnContext';
import { Form, Spin, Tooltip, message, Button } from 'antd';
import { useDescriptions, Descriptions } from '@/components/Descriptions';
import { downloadTemplate, getFileNameNotType, splitFileUrl } from '@/utils';
import MyIcon from '@/components/MyIcon';
import DetailInfoAssetList from './DetailInfoAssetList';
import DetailInfoMaterialList from './DetailInfoMaterialList';
import moment from 'moment';
import { TypographyTitle } from '@/components/Typography';
import { getBaseUrl } from '@/services/urlconst';
import { readReadShowFileService } from '@/services/BaseLayout';
import { EyeOutlined } from '@ant-design/icons';

export const DetailInfoCenterViewMainOA: React.FC = () => {
  /** 引入上下文 */
  const { styleFixCls, infoObj } = useContext(ChangeControllerContext);

  const [changeFromRef] = Form.useForm(); // 表单实例

  /** 轻阅读预览 */
  const { readReadShowFileRun } = readReadShowFileService();

  /**轻阅读预览 */
  const onOpenReadOfdWord = (fieldUrl: string) => {
    readReadShowFileRun({ fieldPath: `${getBaseUrl()}${fieldUrl}` });
  };

  useEffect(() => {
    BasicMethods?.setFieldsValue({ ...infoObj, createTime: moment(infoObj?.createTime).format('YYYY-MM-DD') });
    ReMethods?.setFieldsValue({ ...infoObj, createTime: moment(infoObj?.createTime).format('YYYY-MM-DD') });
  }, [infoObj]);

  let BasicSchemasArr: any = useMemo(() => {
    return [
      {
        label: '申请日期',
        field: 'createTime',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        field: `applyCode`,
        label: `流水单号`,
        component: 'Input',
        disabled: true,
        placeholder: '自动带出',
      },
      {
        label: '申请人',
        field: 'createrName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '联系电话',
        field: 'createPhone',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '申请部门/单位',
        field: 'createDepartmentName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '职务岗位',
        field: 'createPositionName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
    ];
  }, [infoObj]);

  let ReSchemasArr: any = useMemo(() => {
    if (infoObj?.handleType) {
      return [
        {
          field: `queryType`,
          label: `申请类型`,
          component: 'Render',
          placeholder: '自动带出',
          // colSpan: 2,
          render(text, record) {
            return record.queryType == '2' ? '退库申请' : record.queryType == '4' ? '归还申请' : '--';
          },
        },
        {
          field: 'belongDepartmentName',
          label: '货物所属部门',
          component: 'Render',
          disabled: true,
          placeholder: '自动带出',
          render: (text, record) => text || '--',
        },
        {
          field: `applyType`,
          label: `货物类型`,
          component: 'Render',
          disabled: true,
          placeholder: '自动带出',
          colSpan: infoObj?.applyType == 2 || infoObj?.queryType == '1' ? 1 : 2,
          render(text, record) {
            return record.applyType == 0 ? '资产&材料' : record.applyType == 1 ? '资产' : '材料';
          },
        },
        {
          field: `handleType`,
          label: '材料处置类型',
          component: 'Render',
          placeholder: '自动带出',
          colSpan: infoObj?.handleType ? 1 : 0,
          render(text, record) {
            return record.handleType === '0' ? '正常退库' : '报废处置';
          },
        },
        {
          field: `busiFlag`,
          label: '是否归口部门审批',
          component: 'Render',
          placeholder: '',
          colSpan: infoObj?.queryType == '1' ? (infoObj?.busiFlag === 1 ? 1 : 2) : 0,
          render(text, record) {
            return record.busiFlag === 1 ? '是' : '否';
          },
        },
        {
          field: `busiDepartmentID`,
          label: '归口部门',
          component: 'Render',
          placeholder: '',
          colSpan: infoObj?.queryType == '1' && infoObj?.busiFlag === 1 ? 1 : 0,
          render(text, record) {
            return record?.busiDepartmentName || '--';
          },
        },

        {
          field: `applyInfo`,
          label: `申请理由`,
          component: 'InputTextArea',
          disabled: true,
          placeholder: '请填写申请理由',
          colSpan: 2,
          allowClear: true,
          showCount: true,
          maxLength: 500,
          autoSize: { minRows: 2, maxRows: 4 },
        },
        {
          field: `applyFile`,
          label: `相关附件`,
          colSpan: 2,
          component: 'Render',
          disabled: true,
          placeholder: '请上传相关附件',
          render: (text, record) => {
            const fileName = 'applyFile';
            return (
              <>
                <div
                  style={{
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    marginLeft: '8px',
                  }}
                >
                  {record?.[fileName]
                    ? splitFileUrl(record?.[fileName])?.map((e, i) => {
                        return (
                          <div>
                            <Tooltip title={e.attachName} key={new Date().getTime() * 25615265152 + e?.attachName}>
                              <a
                                onClick={() => {
                                  message.success('下载中，请稍后...');
                                  downloadTemplate('/assetInfo/downloadFile', e?.attachName, e?.attachUrl, () => {});
                                }}
                              >
                                <MyIcon type="icon-file-text-fill" />
                                &nbsp;
                                {getFileNameNotType(e.attachName, 8)}
                              </a>
                            </Tooltip>
                            {/* 轻阅读预览 */}
                            <Tooltip title={'在线预览'}>
                              <Button type="link" size="small" onClick={() => onOpenReadOfdWord(e?.attachUrl)} icon={<EyeOutlined />} />
                            </Tooltip>
                          </div>
                        );
                      })
                    : '--'}
                </div>
              </>
            );
          },
        },
        {
          field: `applyTitle`,
          label: `事项名称`,
          component: 'Input',
          disabled: true,
          placeholder: '请输入事项名称',
          colSpan: 0,
        },
      ];
    } else {
      return [
        {
          field: `queryType`,
          label: `申请类型`,
          component: 'Render',
          placeholder: '自动带出',
          // colSpan: 2,
          render(text, record) {
            return record.queryType == '2' ? '退库申请' : record.queryType == '4' ? '归还申请' : '--';
          },
        },
        {
          field: 'belongDepartmentName',
          label: '货物所属部门',
          component: 'Render',
          disabled: true,
          placeholder: '自动带出',
          render: (text, record) => {
            return record?.belongDepartmentName || '--';
          },
        },
        {
          field: `applyType`,
          label: `货物类型`,
          component: 'Render',
          disabled: true,
          placeholder: '自动带出',
          colSpan: infoObj?.applyType == 2 || infoObj?.queryType == '1' ? 1 : 2,
          render(text, record) {
            return record.applyType == 0 ? '资产&材料' : record.applyType == 1 ? '资产' : '材料';
          },
        },
        {
          field: `busiFlag`,
          label: '是否归口部门审批',
          component: 'Render',
          placeholder: '',
          colSpan: infoObj?.queryType == '1' ? (infoObj?.busiFlag === 1 ? 1 : 2) : 0,
          render(text, record) {
            return record.busiFlag === 1 ? '是' : '否';
          },
        },
        {
          field: `busiDepartmentID`,
          label: '归口部门',
          component: 'Render',
          placeholder: '',
          colSpan: infoObj?.queryType == '1' && infoObj?.busiFlag === 1 ? 1 : 0,
          render(text, record) {
            return record?.busiDepartmentName || '--';
          },
        },

        {
          field: `applyInfo`,
          label: `申请理由`,
          component: 'InputTextArea',
          disabled: true,
          placeholder: '请填写申请理由',
          colSpan: 2,
          allowClear: true,
          showCount: true,
          maxLength: 500,
          autoSize: { minRows: 2, maxRows: 4 },
        },
        {
          field: `applyFile`,
          label: `相关附件`,
          colSpan: 2,
          component: 'Render',
          disabled: true,
          placeholder: '请上传相关附件',
          render: (text, record) => {
            const fileName = 'applyFile';
            return (
              <>
                <div
                  style={{
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    marginLeft: '8px',
                  }}
                >
                  {record?.[fileName]
                    ? splitFileUrl(record?.[fileName])?.map((e, i) => {
                        return (
                          <div>
                            <Tooltip title={e.attachName} key={new Date().getTime() * 25615265152 + e?.attachName}>
                              <a
                                onClick={() => {
                                  message.success('下载中，请稍后...');
                                  downloadTemplate('/assetInfo/downloadFile', e?.attachName, e?.attachUrl, () => {});
                                }}
                              >
                                <MyIcon type="icon-file-text-fill" />
                                &nbsp;
                                {getFileNameNotType(e.attachName, 8)}
                              </a>
                            </Tooltip>
                            {/* 轻阅读预览 */}
                            <Tooltip title={'在线预览'}>
                              <Button type="link" size="small" onClick={() => onOpenReadOfdWord(e?.attachUrl)} icon={<EyeOutlined />} />
                            </Tooltip>
                          </div>
                        );
                      })
                    : '--'}
                </div>
              </>
            );
          },
        },
        {
          field: `applyTitle`,
          label: `事项名称`,
          component: 'Input',
          disabled: true,
          placeholder: '请输入事项名称',
          colSpan: 0,
        },
      ];
    }
  }, [infoObj]);

  // 基本信息表格配置
  const [BasicConfig, BasicMethods] = useDescriptions({
    labelWidth: 200,
    basicForm: changeFromRef,
    schemas: BasicSchemasArr,
  });

  // 领用退库信息表格配置
  const [ReConfig, ReMethods] = useDescriptions({
    labelWidth: 200,
    basicForm: changeFromRef,
    schemas: ReSchemasArr,
  });

  return (
    <>
      <div className="commonTabsBodyDom">
        <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
          <ScrollBarLayout style={{ padding: '20px 10%' }}>
            <Spin spinning={false}>
              {/* record.queryType == '2' ? '退库申请' : record.queryType == '4' ? '归还申请' : '--'; */}
              <TypographyTitle
                children={infoObj.queryType == '2' ? '退库申请' : infoObj.queryType == '4' ? '归还申请' : '--'}
                style={{ textAlign: 'center', borderLeft: 'none' }}
                level={1}
              />
              <TypographyTitle children={'基本信息'} style={{ margin: '25px 0px 20px' }} level={2} />
              <Descriptions config={BasicConfig} />

              <TypographyTitle
                children={(infoObj.queryType == '2' ? '退库' : infoObj.queryType == '4' ? '归还' : '--') + '信息'}
                style={{ margin: '25px 0px 20px' }}
                level={2}
              />
              <Descriptions config={ReConfig} />

              {/* 资产列表数据 */}
              {infoObj?.applyNumberAssetList?.length > 0 && (
                <>
                  <TypographyTitle children={'资产详单'} style={{ margin: '25px 0px 20px' }} level={2} />
                  <DetailInfoAssetList dataList={infoObj?.applyNumberAssetList || []} />
                </>
              )}

              {/* 材料列表数据 */}
              {infoObj?.applyNumberMaterialList?.length > 0 && (
                <>
                  <TypographyTitle children={'材料详单'} style={{ margin: '25px 0px 20px' }} level={2} />
                  <DetailInfoMaterialList dataList={infoObj?.applyNumberMaterialList || []} />
                </>
              )}
            </Spin>
          </ScrollBarLayout>
        </div>
      </div>
    </>
  );
};

{
  /* <div className="descriptionsType-rootBoxDiv">
                    <div
                      className="descriptionsType-rootBoxDiv-formTableTitleTypography"
                      style={{ textAlign: 'center', height: 50, border: '1px solid #fafafa' }}
                    >
                      <span>{infoObj?.applyType === '2' ? '材料明细' : '材料明细'}</span>
                    </div>
                  </div> */
}
